import React, { Component } from 'react'
import 'antd/dist/antd.css'
import { Slider } from 'antd'
import PropTypes from 'prop-types'

class SliderTwo extends Component {

    state = {
        disabled: false,
    };

    handleDisabledChange = disabled => {
        this.setState({ disabled });
    }

    //props 默认值
    static defaultProps = {
        props: true
    }

    //props 类型验证
    static propTypes = {
        flag: PropTypes.string
    }

    render() { 
        let { disabled } = this.state
        return (
            <div style={style}>
                <Slider range marks={marks} defaultValue={[20, 50]} disabled={disabled} />
            </div>
        )
    }
}

const style = {
    display: 'inline-block',
    width: 500,
    marginLeft: 100,
}

const marks = {
    0: {
        style: {
            color: 'red'
        },
        label: <strong>0</strong>
    },
    100: {
        style: {
            color: 'red'
        },
        label: <strong>100</strong>
    }
}
 
export default SliderTwo